/* 商品列表页 */
import { } from "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js";

//引入懒加载模块
import { } from "./jquery.lazyload.js";

//引入分页的模块
import { } from "./jquery.pagination.js";
/* 
    图片懒加载的使用。
    1.给图片对象设置宽高。
    2.给图片对象添加一个类 -> class='lazy';
    3.将图片对象src属性 -> data-original
    4.添加js代码执行懒加载动作。
*/


const $list = $('.list ul');
let $pagesize = null;//总的页数

let $array = [];//保存排序之前的数据
let $newarray = [];//保存排序之后的数据

$.ajax({
    url: "http://10.31.165.61/JS2012/mall360/php/list.php",
    dataType: "json"
}).done(function (data) {
    let $arrlist = data.pagecontent;
    renderer($arrlist);

    //第一页进行排序
    $.each(data.pagecontent, function (index, value) {
        $newarray[index] = $array[index] = value;
    });

    //分页
    $pagesize = data.pagesize;//总的页数

    $(".page").pagination({
        pageCount: $pagesize, //总的页数
        jump: true, //是否开启跳转到指定的页数，布尔值。
        prevContent: '上一页', //将图标改成上一页下一页。
        nextContent: '下一页',
        callback: function (api) { //包含当前点击的分页的页码
            // api.getCurrent()获取当前的点击的页码。
            $.ajax({
                url: "http://10.31.165.61/JS2012/mall360/php/list.php",
                data: {
                    page: api.getCurrent()
                },
                dataType: "json"
            }).done(function (data) {
                let $arrlist = data.pagecontent;
                renderer($arrlist);

                //分页也要重排
                $array = [];
                $newarray = [];
                $.each(data.pagecontent, function (index, value) {
                    $newarray[index] = $array[index] = value;
                });
            });
        }
    });
});
//封装获取得到的数据进行渲染的函数
function renderer(data) {
    let $strHtml = "";
    $.each(data, function (index, value) {
        $strHtml += `
            <li>
                <a href="http://10.31.165.61//JS2012/mall360/src/detail.html?sid=${value.sid}">
                    <div><img class='lazy' data-original="${value.picurl}" alt="" width="165" height="165"></div>
                    <p>${value.title}</p>
                    <span>￥${value.price}</span>
                </a>
            </li>
        `
    });
    $list.html($strHtml);
    //懒加载
    $("img.lazy").lazyload({
        effect: "fadeIn" //切换形式
    });
}

//排序 - 点击价格排序按钮事件
$(".sort_price").on("click", function () {
    $(".sort_price").addClass("active").siblings().removeClass("active");
    $newarray.sort(function (a, b) {
        return a.price - b.price;
    });
    renderer($newarray);
});

//点击默认按钮
$(".sort_default").on("click", function () {
    $(".sort_default").addClass("active").siblings().removeClass("active");
    renderer($array);
});